<template>
  <view class="login-page">
    <view
      class="logo-container"
      :style="{
        paddingTop: globalState.systemInfo?.safeArea?.top + 'px',
      }"
    >
      <view class="logo-container-inner">
        <Image class="close" :src="LoginClose" @tap="handleClose" />
      </view>
    </view>

    <view class="logo">
      <Image class="logo-icon" :src="LoginLogo" />
    </view>

    <text class="login-title">欢迎使用诊疗系统</text>

    <view class="login-footer">
      <view class="login-options">
        <view class="login-options-radio" @tap="handleChecked">
          <Image
            class="login-options-radio-icon"
            :src="checked ? LoginCheck : LoginCheckNo"
          />
        </view>

        <view class="login-options-content">
          <text class="login-options-content-text">我已阅读并同意</text>
          <text class="login-options-content-text-link">
            <text class="login-options-content-text-link-text"
              >《用户隐私政策》</text
            >
            <text class="login-options-content-text-link-text">、</text>
            <text class="login-options-content-text-link-text"
              >《用户注册服务协议》</text
            >
          </text>
        </view>
      </view>

      <view class="login-btn" @tap="handleLogin">
        <text class="login-btn-text">一键登录</text>
      </view>

      <view class="login-footer-skip">
        <text class="skip" @tap="handleSkip">暂不登录</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import Taro from "@tarojs/taro";
import LoginClose from "../../assets/images/login_close.png";
import LoginLogo from "../../assets/images/login_logo.png";
import LoginCheckNo from "../../assets/images/login_check_no.png";
import LoginCheck from "../../assets/images/login_check.png";
import { useGlobalStore } from "../../stores/globalStore";
import { loginWechat } from "../../api/login.api";
import { setToken, setClinicId } from "../../utils/auth.util";
import { safeNavigateBack } from "../../utils/navigation.util";
import { ref } from "vue";
import { useRouter, useReady } from "@tarojs/taro";

const globalState = useGlobalStore();
const checked = ref(false);
const router = useRouter();

const handleSkip = () => {
  // 使用 reLaunch 确保页面栈被清空，跳转到首页
  Taro.reLaunch({
    url: "/pages/index/index",
  });
};

const handleChecked = () => {
  checked.value = !checked.value;
};

const handleClose = () => {
  if (router.params.type === "402") {
    Taro.reLaunch({
      url: "/pages/index/index",
    });
  } else {
    safeNavigateBack();
  }
};

const handleLoginWechat = async (code: string) => {
  const res = await loginWechat({ code });

  if (res.code === "200") {
    setToken(res.data.token);
    setClinicId(res.data.clinicId.toString());
    globalState.isLogin = true;

    handleClose();
  } else {
    Taro.showToast({
      title: res.msg,
      icon: "none",
    });
  }
};

const handleLogin = () => {
  if (checked.value) {
    Taro.login({
      success: function (res) {
        if (res.code) {
          handleLoginWechat(res.code);
        } else {
          console.log("登录失败！" + res.errMsg);
        }
      },
    });
  } else {
    Taro.showToast({
      title: "请先阅读并同意用户隐私政策和用户注册服务协议",
      icon: "none",
    });
  }
};

useReady(() => {
  globalState.isLogin = false;
});
</script>

<style lang="scss">
.login-page {
  display: flex;
  flex-direction: column;
  // align-items: center;
  // justify-content: center;
  height: 100vh;
  background: #fafafa;

  .logo-container {
    width: 100%;
    height: 184px;

    background: #f4faff;
    // opacity: 0.5;
    // filter: blur(89.19999694824219px);

    .logo-container-inner {
      padding-top: 11px;
      padding-left: 16px;

      .close {
        width: 22px;
        height: 22px;
      }
    }
  }

  .logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .logo-icon {
      width: 84px;
      height: 84px;
    }
  }

  .login-title {
    width: 100%;
    margin-top: 22px;
    font-weight: 400;
    font-size: 20px;
    color: #333333;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }

  .login-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding-bottom: 60px;
    padding-left: 16px;
    padding-right: 16px;

    .login-options {
      display: flex;
      align-items: flex-start;
      width: 100%;

      .login-options-radio {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 22px;
        padding-top: 1px;

        .login-options-radio-icon {
          width: 22px;
          height: 22px;
        }
      }

      .login-options-content {
        flex: 1;
        width: 100%;

        .login-options-content-text {
          font-weight: 400;
          font-size: 13px;
          color: #333333;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }

        .login-options-content-text-link {
          color: #16ada4;
          font-weight: 400;
          font-size: 13px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
    }

    .login-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 45px;
      margin-top: 4px;
      background: linear-gradient(180deg, #37d8db 0%, #16ada4 100%);
      border-radius: 50px 50px 50px 50px;

      .login-btn-text {
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
        line-height: 24px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }

    .login-footer-skip {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 45px;
      margin-top: 22px;

      .skip {
        font-weight: 400;
        font-size: 16px;
        color: #777777;
        line-height: 24px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
  }
}
</style>
